<!--
* @Description:UserRole
* @fileName: UserRole
* @Author:WXM
* @Date: 2022/10/07 23:46:42
-->
<template>
  <div>
    <!--    <fixedNavBar content="角色管理" />-->
    <div class="out-container">
      <el-row :gutter="10">
        <el-col :span="7">
          <el-card>
            <el-scrollbar
              :style="{ height: $baseTableHeight(-170) + 'px' }"
            >
              <div id="all-card" class="all-card">
                <div
                  v-for="item in roleList"
                  ref="roles"
                  :key="item.roleId"
                  class="card"
                  :class="{
                    active: item.roleId === selectedIndex
                  }"
                  @click="toggle(item.roleId, item.roleName)"
                >
                  {{ item.roleName }}
                </div>
                <div
                  v-if="flagChange"
                  class="card"
                  style="
										font-size: 26px;
										color: #9eb1e1;
										border: 1px solid #9eb1e1;
									"
                  @click="flagChange = false"
                >
                  +
                </div>
                <input
                  v-else
                  v-model="inputval"
                  class="card"
                  type="text"
                  style="
										font-size: 26px;
										color: #FFFFFF;
										border: 1px solid #9eb1e1;
									"
                  @change="flagChange = true"
                  @blur.prevent="changeSave()"
                >
              </div>
            </el-scrollbar>
          </el-card>
        </el-col>
        <el-col :span="17">
          <el-card>
            <!-- +++ -->
            <div slot="header" class="flex-row flex-center" style="justify-content: space-between">
              <span
                class="el-page-header__content"
                style="color: #FFFFFF"
              >权限设置</span>
              <div style="margin-right: 40px">
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="dele"
                >
                  删除角色</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  :disabled="isEdit"
                  @click="onEdit"
                >
                  编辑</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  :disabled="isSubmit"
                  @click="submit"
                >
                  提交</el-button>
              </div>
            </div>
            <div class="card-padding">
              <el-scrollbar
                class="scroll-container"
                :style="{
                  height: $baseTableHeight(-120) + 'px'
                }"
                :native="false"
                :noresize="true"
              >
                <div
                  v-for="item in menuList"
                  :key="item.id"
                  style=""
                >
                  <div class="left">
                    {{ item.title }}
                  </div>
                  <div class="check">
                    <el-checkbox-group v-model="checkList1">
                      <el-checkbox
                        v-for="child in item.children"
                        :key="child.id"
                        :disabled="isSubmit"
                        :label="child.id"
                      >{{ child.title }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {
  getRoleList,
  delRole,
  putAddRoleInfo
} from '@/api/system/role'
import { getSysMenu } from '@/api/system/menu'
export default {
  name: 'UserRole',
  data() {
    return {
      checkList1: [],
      selectedIndex: 1,
      // 菜单列表
      menuList: [],
      // 角色列表
      roleList: [],
      // 切换flag
      flagChange: true,
      // input值
      inputval: null,
      // 添加角色
      addRole: {
        creator: null,
        menuIds: '',
        permIds: null,
        roleDesc: null,
        roleId: null,
        roleName: ''
      },
      isEdit: false,
      isSubmit: true
    }
  },
  created() {
    this.getSysMenuAPI()
    this.getRoleListAPI()
  },
  methods: {
    /** 点击高亮*/
    toggle(index, roleName) {
      this.isEdit = false
      this.isSubmit = true
      this.selectedIndex = index
      this.addRole.roleName = roleName
      this.roleList.forEach((item) => {
        if (item.roleId === index) {
          console.log(item.menuIds)
          this.checkList1 = item.menuIds ? [...item.menuIds.split(',').map(Number)] : []
        }
      })
    },
    // 删除角色
    dele() {
      if (this.selectedIndex > 0) {
        this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            await delRole({ id: this.selectedIndex })
            // 初始化
            this.selectedIndex = 1
            this.getRoleListAPI()

            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
      } else {
        this.$message({
          type: 'error',
          message: '禁止删除该角色'
        })
      }
    },
    // 查询角色列表
    async getRoleListAPI() {
      const { data } = await getRoleList()
      this.roleList = data.result
      // 初始化 角色分配权限
      if (this.roleList[this.selectedIndex - 1]?.menuIds) {
        // id转为数组格式,转为数字类型
        this.checkList1 = [...this.checkList1, ...this.roleList[this.selectedIndex - 1].menuIds.split(',').map(Number)]
      } else {
        this.selectedIndex =
          this.roleList[this.roleList.length - 1].roleId
        this.addRole.roleId = this.selectedIndex
      }
    },
    // 查询菜单列表
    async getSysMenuAPI() {
      const { data } = await getSysMenu()
      this.menuList = data
    },
    /**
			 * input保存 失焦
			 */
    async changeSave() {
      this.flagChange = true
      if (this.inputval) {
        this.addRole.roleName = this.inputval
        this.addRole.menuIds = ''
        this.addRole.roleId = null
        await putAddRoleInfo({ ...this.addRole }).then(res => {
          this.inputval = ''
          this.getRoleListAPI()
          this.onEdit()
        })
      } else {
        this.inputval = ''
      }
    },
    // 提交按钮 保存
    async submit() {
      this.isEdit = false
      this.isSubmit = true
      this.menuList.forEach(item => {
        this.checkList1.push(item.id)
      })
      if (!this.addRole.roleName) {
        this.addRole.roleName = this.roleList[0].roleName
      }
      this.addRole.menuIds = this.$baseLodash.uniq(this.checkList1).join(',')
      this.addRole.roleId = this.selectedIndex
      // 此处应该调用 修改接口 因为 roleName 已经创建
      await putAddRoleInfo({ ...this.addRole })
      this.selectedIndex = 1
      // 刷新列表
      await this.getRoleListAPI()
      this.$message.success('提交成功！！')
      this.inputval = null
    },
    onEdit() {
      this.isEdit = true
      this.isSubmit = false
    }
  }
}
</script>
<style lang="scss" scoped>
	// 固定 导航条开始
	.fixed-box {
		width: 100%;
		position: fixed;
		top: 116px;
		z-index: 1;
	}
	.role-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60px;
		background-color: #fff;
		width: 100%;
		margin-left: -8px;
	}
	.left {
		padding-left: 5px;
		border-left: 5px solid $base-color-default;
		margin-bottom: 10px;
		margin-top: 10px;
		margin-left: 20px;
    color: #FFFFFF;
	}
	.backPad {
		margin-left: 20px;
	}
	// 导航条结束
	// ::v-deep .el-page-header__left {
	// 	display: flex;
	// 	cursor: pointer;
	// 	margin-right: 40px;
	// 	position: relative;
	// 	margin-left: 18px;
	// }
	.check {
		margin-bottom: 30px;
		margin-left: 40px;
	}
	.card {
		width: 98%;
		height: 48px;
    cursor: pointer;
		//background-color: #fafafa;
		font-size: 16px;
		text-align: center;
		line-height: 48px;
		margin-bottom: 10px;
	}

	.all-card > div:hover {
		//background-color: $base-color-default;
		color: #fafafa;
	}
	.active {
		background-color: $base-color-default;
		color: #fafafa;
	}
	.foot-submit {
		background-color: #fff;
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
	}
</style>
